<template>
    <div>
        <el-card>
            <el-form inline ref="formRef" :model="selectObj">
                <el-form-item label="关键词:" prop="times">
                    <el-input v-model="selectObj.keyword" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="selectList">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top: 10px;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="_id" label="id" width="180" />
                <el-table-column prop="channel" label="名称" width="180" />
                <el-table-column prop="title" label="标题" width="180" />
                <el-table-column prop="pubData" label="发布时间" />
                <el-table-column label="操作" fixed="right" width="300px">
                    <template v-slot="scope">
                        <span class="cursordel" @click="handelDelete(scope.row)">删除</span>
                    </template>

                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 15, 20, 25]"
                :size="size" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-card>
    </div>
</template>
<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { reqNews, deleteNews } from '@/api/acl/spu'
import { ElMessageBox, ElMessage } from 'element-plus'
const selectObj = ref({
    keyword: ""
})
const tableData = ref([])
const total = ref()
const currentPage4 = ref(1)
const size = ref(5)
function seelctData() {
    reqNews({
        page: currentPage4.value,
        limit: size.value,
        keyword: selectObj.value.keyword
    }
    ).then(res => {
        tableData.value = res.data.datas
        total.value = res.data.total
    }
    )
}
const handleSizeChange = (val) => {
    size.value = val
    seelctData()
}
const handleCurrentChange = (val) => {
    currentPage4.value = val
    seelctData()
}
function selectList() {
    seelctData()
}
const reset = () => {
    selectObj.value = {
        keyword: "",

    };
    seelctData()
};

/**
 * 
 * @function 删除  
 */
function handelDelete(val) {
    console.log(val)

    ElMessageBox.confirm(
        '确认重置该账号密码吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteNews(val._id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                seelctData()
            } else {
                ElMessage({
                    message: '删除失败',
                    type: 'info',
                })
            }
        })
    })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消重置',
            })
        })

}
onMounted(() => {
    seelctData()
})
</script>
<style>
.cursordel {
    font-size: 14px;
    cursor: pointer;
    color: #409eff;
}
</style>